<template>
  <div ref="ganttContainer"></div>
</template>

<script>
import { gantt } from 'dhtmlx-gantt';
export default {
  props: {
    tasks: {
      type: Object,
      default() {
        return { data: [], links: [], noWorkDates: [] };
      }
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timer: null,
      resizeType: ''
    };
  },
  mounted() {
    const that = this;
    gantt.clearAll();
    gantt.plugins({
      tooltip: false,
      marker: true,
      // click_drag: true,
      // auto_scheduling: true,
      // critical_path: true,
      // drag_timeline: true,
      quick_info: true // 快速信息框
    });
    gantt.i18n.setLocale({
      date: {
        month_full: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        month_short: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        day_full: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        day_short: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      }
    });

    gantt.config.columns = [
      {
        name: 'text',
        label: '产线',
        tree: false,
        align: 'left',
        width: '250'
      }
    ];
    gantt.config.work_time = false;
    gantt.config.drag_links = false;
    gantt.config.scale_height = 40;
    // gantt.config.row_height = 40;
    gantt.config.date_format = '%Y-%m-%d';
    gantt.config.duration_unit = 'hour'; //工期计算的基本单位为小时
    gantt.config.duration_step = 1; //工期计算的倍数为1，即1小时
    gantt.config.show_empty_state = false;
    gantt.config.min_column_width = 200;
    gantt.config.scales = [
      // { unit: 'month', step: 1, format: '%F, %Y' },
      { unit: 'day', step: 1, format: '%Y-%m-%d (%D)' }
      // { unit: 'hour', step: 12, format: '.' }
      // { unit: 'hour', step: 4, format: '%H' }
    ];

    // gantt.templates.timeline_cell_class = function (task, date) {
    //   if (!gantt.isWorkTime({ date: date, task: task })) return 'week_end';
    //   return '';
    // };
    //双击显示明细
    gantt.config.details_on_dblclick = false;

    gantt.templates.quick_info_content = function (start, end, task) {
      if (task.isNoWorkday || Number(task.workHourAccumulate) == 0) {
        return false;
      }
      let tBody = '';
      if (task.detailData && task.detailData.length > 0) {
        task.detailData.forEach((item, index) => {
          tBody += `<tr>
         <td>${index + 1}</td>
         <td>${item.workOrderNo}</td>
         <td>${item.productPartNo}</td>
         <td>${item.productPartModel}</td>
         <td>${item.planQuantity}</td>
         <td>${item.planWorkHour}</td>
        </tr>`;
        });
      } else {
        tBody = `<tr>
         <td colspan="6">暂无数据</td>
        </tr>`;
      }

      let tableDom = `<div class="wrap"><div>累计工时:${task.workHourAccumulate || 0} 剩余工时:${
        task.remainingWorkHour || 0
      }</div><table border="1" class="gantt_cal_qi_content_table">
        <colgroup>
          <col width="50px">
          <col width="150px">
          <col width="120px">
          <col width="120px">
          <col width="80px">
          <col width="80px">
          </colgroup>
          <thead>
        <tr>
          <th>序号</th>
          <th>工单号</th>
          <th>产品编码</th>
          <th>产品型号</th>
          <th>计划数量</th>
          <th>计划工时</th>
          </tr>
          </thead>
          <tbody>
          ${tBody}
          </tbody>
          </table>
          </div>`;
      return tableDom;
    };
    gantt.templates.task_text = function (start, end, task) {
      if (Number(task.workHourAccumulate) == 0) {
        return '';
      } else {
        return `
      <div class="task-content" >
        <div>${task.workHourAccumulate}(${task.workHourAccumulatePercent}%)</div>
      </div>
      `;
      }
    };

    // 自定义颜色
    gantt.templates.task_class = function (start, end, task) {
      if (task.isNoWorkday) {
        return 'noWorkday';
      }
      let status = Number(task.workHourAccumulatePercent);
      if (status < 90) {
        return '';
      } else if (90 <= status && status <= 100) {
        return 'current';
      } else if (status > 100) {
        return 'danger';
      } else {
        return '';
      }
    };
    gantt.config.readonly = this.readonly;
    gantt.init(that.$refs.ganttContainer);
  },
  methods: {
    // 更新甘特图
    drawGantt() {
      const that = this;
      gantt.clearAll();
      let initTimes = that.tasks.initTime;
      gantt.config.start_date = initTimes[0];
      gantt.config.end_date = initTimes[1];
      console.log(initTimes, 'initTimes');
      gantt.parse(that.tasks);
      // gantt.selectTask(4);
    },
    // 销毁甘特图
    destroyGantt() {
      gantt.clearAll();
      clearInterval(this.timer);
      this.timer = null;
      // gantt.destructor();
      // gantt = null;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .gantt_grid_data .gantt_cell {
  border-right: 1px solid #cecece !important;
  color: #454545;
}
::v-deep .gantt_grid_scale {
  background: #e0efc9 !important;
}
::v-deep .gantt_task_scale {
  background: #e0efc9 !important;
}
::v-deep .gantt_task .gantt_task_scale .gantt_scale_cell {
  color: #333 !important;
  font-weight: bold !important;
  border-right: 1px solid #cecece !important;
  overflow: visible !important;
  .scaleHour {
    transform: translateX(-50%);
  }
}
::v-deep .gantt_grid_scale .gantt_grid_head_cell {
  color: #333 !important;
  font-weight: bold !important;
  border-right: 1px solid #cecece !important;
}

::v-deep .gantt_task_cell.week_end {
  background-color: #cecece;
}
::v-deep .status_line {
  background-color: #0ca30a;
}
::v-deep .gantt_task_line {
  border: none;
  background-color: #3db9d300;
  &.noWorkday {
    background-color: #9e9e9e;
    cursor: not-allowed !important;
    .gantt_task_progress_wrapper {
      cursor: not-allowed !important;
      background-color: transparent;
      .gantt_task_progress {
        background-color: transparent;
      }
    }
    .gantt_task_content {
      cursor: not-allowed !important;
      .task-content {
        color: transparent;
      }
    }
  }
}
::v-deep .gantt_task_line.gantt_project {
  display: none;
}
::v-deep .gantt_task_line.gantt_selected {
  box-shadow: none;
}
::v-deep .gantt_bar_task {
  .gantt_task_progress_wrapper {
    .gantt_task_progress {
      background-color: #03a7f0;
    }
  }
  .gantt_task_content {
    .task-content {
      color: #000;
      text-align: right;
      padding-right: 5px;
    }
  }
}
::v-deep .gantt_bar_task.current {
  .gantt_task_progress_wrapper {
    .gantt_task_progress {
      background-color: #95f204;
    }
  }
  .gantt_task_content {
    .task-content {
      background-color: #95f204;
    }
  }
}
::v-deep .gantt_bar_task.danger {
  .gantt_task_progress_wrapper {
    .gantt_task_progress {
      background-color: red;
    }
  }
  .gantt_task_content {
    .task-content {
      background-color: red;
    }
  }
}
</style>
<style scoped lang="scss">
@import '~dhtmlx-gantt/codebase/dhtmlxgantt.css';
::v-deep .gantt_cal_quick_info {
  width: auto;
  max-height: 300px; /* 设置一个固定的高度 */
  overflow-y: scroll; /* 使得超出部分可以滚动 */
  outline: 1px solid #cecece;
  border: none;
  .gantt_cal_qi_title {
    padding: 8px;
    display: none;
  }
  .gantt_cal_qi_content {
    padding: 0;
    .wrap {
      padding: 8px;
    }
  }
  .gantt_cal_qi_tdate {
    display: none;
  }
  .gantt_cal_qi_controls {
    display: none;
  }
  .gantt_cal_qi_content_table {
    table-layout: fixed;
    border-collapse: collapse;
    word-break: break-all;
    word-wrap: break-word;
    border-width: 0;

    tr {
      td,
      th {
        height: 25px;
        font-size: 12px;
        line-height: 25px;
        text-align: center;
      }
    }
  }
}
</style>
